import React, { useState } from 'react';
import Header from './components/Header';
import List from './components/List';
import Footer from './components/Footer';
import './App.css';

function App() {
  // 初始数据
  const [todos, settodos] = useState([
    {
      id: 1,
      text: '唱',
      done: false
    },
    {
      id: 2,
      text: '跳',
      done: false
    },
    {
      id: 3,
      text: 'rap',
      done: true
    },
    {
      id: 4,
      text: '篮球',
      done: true
    },
    {
      id: 5,
      text: 'music',
      done: true
    },
  ])

  // 添加todo方法
  const addTodo = (obj) => {
    const oldtodos = todos
    const newtodos = [obj, ...oldtodos]
    settodos(newtodos)
  }

  // 更新todo方法
  const updateTodo = (id,ischecked) => {
    const newtodos = todos.map((obj) => {
      if (id === obj.id) {
        return {...obj,done: ischecked}
      }
      else return obj
    })
    settodos(newtodos)
  }

  // 删除todo方法
  const deletetodo = (id) => {
    const newtodos = todos.filter((obj) => {
      if (obj.id !== id) {
        return obj
      }
    })
    settodos(newtodos)
  }

  // 全选方法
  const checkedall = (ischecked) => {
    const newtodos = todos.map((todo) => {
      // return {...todo,done: ischecked}
      todo.done = ischecked
      return todo
    })
    settodos(newtodos)
  }

  // 删除已完成
  const clearAlldone = () => {
    const newtodos = todos.filter((todo) => {
      return !todo.done
    })
    settodos(newtodos)
  }

  // jsx
  return (
    <div className="todo-container">
    <div className="todo-wrap">
      <Header addTodo={addTodo}></Header>
      <List todos={todos} updateTodo={updateTodo} deletetodo={deletetodo} ></List>
      <Footer todos={todos} checkedall={checkedall} clearAlldone={clearAlldone}></Footer>
    </div>
  </div>
  );
}

export default App;
